<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>文本修饰</title>
		<style>
			h1 {
				text-decoration: overline; /* 上划线 */
			}

			h2 {
				text-decoration: line-through; /* 删除线 */
			}

			h3 {
				text-decoration: underline; /* 下划线 */
			}

			.uppercase {
				text-transform: uppercase; /* 全部大写 */
			}

			.lowercase {
				text-transform: lowercase; /* 全部小写 */
			}

			.capitalize {
				text-transform: capitalize; /* 所有单词的首字母大写 */
			}

			div {
				text-indent: 20px; /* 首行缩进 */
			}

			.letter-spacing {
				letter-spacing: 20px; /* 单个字符间隙 */
			}

			.line-height {
				line-height: 40%; /* 行高 */
			}
		</style>
	</head>
	<body>
		<!-- 文本修饰 上划线 下划线 删除线 -->
		<h1>这是h1标签</h1>
		<h2>这是h2标签</h2>
		<h3>这是h3标签</h3>

		<!-- 文本转换 大写 小写 首字母大写 -->
		<p class="uppercase">This is some text.</p>
		<p class="lowercase">This is some text.</p>
		<p class="capitalize">this is some text.</p>

		<!-- 首行缩进 -->
		<div>Lmero de la vida, el mundo es un lugar muy bonito.</div>

		<!-- 单个字符间隙 -->
		<p class="letter-spacing">你好我好大家好</p>
		<p class="letter-spacing">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>

		<!-- 行高 -->
		<p class="line-height">
			<span style="color: red">这是一个标准。</span><br />
			<span style="color: blue">这是一个标准。</span><br />
			<span style="color: green">这是一个标准。</span><br />
		</p>

		<!-- 设置元素的文本方向：rtl 左对齐，ltr 右对齐 -->
		<p style="direction: rtl">This text is right-aligned.</p>

		<!-- 单词之间的空白空间 -->
		<p style="word-spacing: 100px">This is some text with a lot of spaces between the words.</p>

		<!-- 元素内禁用文字不换行 -->
		<p style="white-space: nowrap">
			This text is not wrapped.This text is not wrapped.This text is not wrapped.This text is not wrapped.This text is
			not wrapped.This text is not wrapped.
		</p>

		<!-- 垂直对齐图像 -->
		<p>
			一个<img
				src="https://www.runoob.com/try/demo_source/logo.png"
				alt="w3cschool"
				width="270"
				height="50"
			/>默认对齐的图像。
		</p>
		<p>
			一个<img
				style="vertical-align: text-top"
				src="https://www.runoob.com/try/demo_source/logo.png"
				alt="w3cschool"
				width="270"
				height="50"
			/>
			text-top 对齐的图像。
		</p>
		<p>
			一个<img
				style="vertical-align: middle"
				src="https://www.runoob.com/try/demo_source/logo.png"
				alt="w3cschool"
				width="270"
				height="50"
			/>
			middle 对齐的图像。
		</p>
		<p>
			一个<img
				style="vertical-align: text-bottom"
				src="https://www.runoob.com/try/demo_source/logo.png"
				alt="w3cschool"
				width="270"
				height="50"
			/>
			text-bottom 对齐的图像。
		</p>

		<!-- 以小型大写字体或者正常字体显示文本。 -->
		<p style="font-variant: small-caps">this is some text in small caps.</p>
	</body>
</html>
